<template>
 <div class="aboutus">
   <trialView @toRegister="handleRegister"/>
  <div class="pageCon flex-center-xs">
    <div class="left">
        <h4 class="title animate__animated animate__fadeInDown">公司介绍</h4>
        <div>深圳美益咨询管理有限公司成立于2014年，旗下核心产品老乡内推专注高离职行业解决方案，独创招聘裂变营销思路，结合BAT营销专家，为企业打造招聘矩阵。 </div>
        <div>企业可以自定义平台名称与LOGO,并且关联公众号与嵌入官网,打造企业专属招聘平台,实现从发布职位——裂变招聘——投递简历——候选人管理——激励政策——奖励发放等招聘全生命周期管理,帮助企业大量、快速招人的同时，不断提升员工的稳定度和人才质量。 </div>
        <div>深圳美益咨询管理有限公司创始人范敏华——数字化管理倡导者，经常作为特邀嘉宾出席各类高端论坛、行业协会交流，发表行业数字化转型洞见，并主办行业第一届数字化转型论坛。</div>
      </div>
      <div class="img-box">
        <img src="@/assets/images/aboutus/boss.png" alt="" width="336" height="392">
        <div class="boss-intro animate__animated animate__fadeInUp">
          <div>曾任职国内最大咨询管理公司北大纵横管理咨询集团咨询总监；</div> 
          <div>主导过20多家大中型企业管理变革； </div> 
          <div>曾任某大型能源企业执行总裁、某商业零售企业执行总经理等高管职务</div> 
        </div>
      </div>
  </div>
  <div class="section-company">
    <div class="pageCon company">
      <h4 class="title text-center animate__animated animate__fadeInDown">公司大事件</h4>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          type="primary"
          size="large"
          :hollow="true"
        >
          <div class="company-time">{{ activity.time }}</div>
          <div class="company-title">{{ activity.title }}</div>
          <ul class="flex-center-start company-img">
            <li v-for="(item,index) in activity.imgs" :key="index" >
              <img :src="item" alt="" width="320" height="210">
            </li>
          </ul>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
  <div class="section-partner pageCon">
    <h4 class="title text-center animate__animated animate__fadeInDown">公司生态</h4>
    <ul class="flex-center-around">
      <li v-for="(item, index) in partner" :key="index">
        <img 
          :src="item" alt="" 
          class="partner_img" 
          @mouseover="addActive($event)" 
          @mouseout="removeActive($event)"
        >
      </li>
    </ul>
  </div>
  <Register ref="register" @registerSuccess="handleSuccess"/>
  <RegisterSrccess ref="success"/>
</div>
</template>
<script>
import trialView from '@/components/trialView/index'
import Register from '@/components/register/index.vue'
import RegisterSrccess from '@/components/register/success.vue'
export default {
  name: 'app',
    components: {
      trialView,
      Register,
      RegisterSrccess
    },
  data () {
    return {
      activities: [
        {
          content: 'Custom icon',
          time: '2021年3月',
          title: '受邀参加宝安区《首届平安保安座谈会》，推动保安行业深化改革发展',
          imgs: [
            require('../../assets/images/aboutus/time1-1.png'),
            require('../../assets/images/aboutus/time1-2.png'),
            require('../../assets/images/aboutus/time1-3.png'),
          ]
         
        },
        {
          content: 'Custom color',
          time: '2021年3月',
          title: '受邀参加宝安区《首届平安保安座谈会》，推动保安行业深化改革发展',
          imgs: [
            require('../../assets/images/aboutus/time2-1.png'),
            require('../../assets/images/aboutus/time2-2.png'),
            require('../../assets/images/aboutus/time2-3.png'),
          ]
         
        },
        {
          content: 'Custom size',
          time: '2021年3月',
          title: '受邀参加宝安区《首届平安保安座谈会》，推动保安行业深化改革发展',
          imgs: [
            require('../../assets/images/aboutus/time3-1.png'),
            require('../../assets/images/aboutus/time3-2.png'),
            require('../../assets/images/aboutus/time3-3.png'),
          ]
         
        }
      ],
      partner:[
        require('../../assets/images/aboutus/partner/partner1.png'),
        require('../../assets/images/aboutus/partner/partner2.png'),
        require('../../assets/images/aboutus/partner/partner3.png'),
        require('../../assets/images/aboutus/partner/partner4.png'),
        require('../../assets/images/aboutus/partner/partner5.png'),
        require('../../assets/images/aboutus/partner/partner6.png'),
        require('../../assets/images/aboutus/partner/partner7.png'),
        require('../../assets/images/aboutus/partner/partner8.png'),
        require('../../assets/images/aboutus/partner/partner9.png'),
        require('../../assets/images/aboutus/partner/partner10.png'),
        require('../../assets/images/aboutus/partner/partner11.png'),
      ]
    }
  },
  methods: {
    handleRegister () {
      this.showRegister()
    },
    showRegister () {
      this.$refs.register.show()
    },
    handleSuccess () {
      this.$refs.success.show()
    },
    addActive(e) {
      e.currentTarget.className = 'partner_img animate__animated animate__pulse'
    },
    removeActive(e) {
      e.currentTarget.className = 'partner_img'
    }
  }
}
</script>
<style lang="less" scoped>
.aboutus{
}
.title{
  font-size: 36px;
  color:@color3;
  margin:0;
  padding:80px 0 50px;
}
.left{
  width:742px;
  font-size: 16px;
  color:@color3;
  padding-bottom:106px;
  div{
    margin-bottom:20px;
  }
}
.img-box{
  width:336px;
  height:392px;
  position: relative;
  .boss-intro{
    display: none;
    width:268px;
    height:342px;
    background: rgba(255,255,255,0.95);
    border-radius: 12px;
    position: absolute;
    left:34px;
    top:25px;
    padding:63px 23px;
    div{
      margin-bottom:20px;
    }
     
  }
 &:hover{
      // margin-top:-20px;
      .boss-intro{
        display: block;
      }
    }
}
.section-company{
  background-color:@activeBg;
  .company{
    &-time{
      font-size: 26px;
      // padding-top:60px;
    }
    &-title{
      font-size: 18px;
      margin-top:10px;
    }
    &-img{
      margin-top:20px;
      padding-bottom:60px;
      li{
        margin-right:30px;
      }
    }
  }
}
.section-partner{
  padding-bottom:82px;
  ul{
    flex-wrap: wrap;
    li{
      margin-right:40px;
      margin-top:46px;
      .partner_img{
       
      }
    }
  }
}

</style>

